<template>
  <div class="container">
    <div class="head-top">
      <span>交易详情</span>
      <img @click="returnPage" src="static/img/return.png" />
    </div>
    <div class="value">
      <span class="num">{{convertBigNumber(tran.value/Math.pow(10,tran.decimals))}}</span>
      <span>{{tran.name}}</span>
    </div>

    <div class="info">
      <div class="gray">发款方</div>
      <div class="black">{{tran.fromAddress}}</div>
      <div class="gray">收款方</div>
      <div class="black">{{tran.toAddress}}</div>
      <div class="gray">矿工费用</div>
      <div class="black">{{tran.gasMoney}} ether</div>
      <div class="gray">备注</div>
      <div
        class="black"
        style="max-width: 80%;text-overflow :ellipsis;overflow: hidden;"
      >{{tran.input}}</div>
    </div>
    <div class="line"></div>

    <div class="tranNumber">
      <div class="left">
        <div class="gray">交易号</div>
          <div class="black order-num">
            <a :href="'https://cn.etherscan.com/tx/' + tran.txhash ">
            <div class="order-num">{{tran.txhash}}</div>
              </a>
            <img @click="copys" id="getHashs" :href="tran.txhash"  type="default"
            data-clipboard-target="#txhash" src="static/img/copys.png" alt="">
          </div>     
        <div class="gray">区块</div>
        <div class="black">{{tran.blockNumber}}</div>
        <div class="gray">交易时间</div>
        <div class="black">{{tran.date}}</div>
      </div>

      <div class="right">
          <canvas
            id="QRCode"
            ref="QRCode"
          ></canvas>
        <div
            id="getHash"
            :href="txHashAddress"
            type="default"
            data-clipboard-target="#txhash"
            @click="copy"
          >复制 URL</div>
      </div>
    </div>
    <input type="text" style="display: none" id="txhash" v-model="txHashAddress" />
  </div>
</template>


<script>
import { Button } from "mint-ui";
import { Dialog } from "vant";
import Clipboard from "clipboard";
import { mapGetters, mapActions } from "vuex";
import accountUtils from "../../service/eth/accountUtils";

export default {
  data() {
    return {
      tran: this.$route.params.tran,
      txHashAddress: "https://cn.etherscan.com/tx/",
    };
  },

  created() {
    if (this.tran.name == "ether") {
      if (this.tran.input) {
        try {
          this.tran.input = this.global.web3.utils.hexToUtf8(this.tran.input);
        } catch (e) {
          console.log(e);
        }
      }
    } else {
      this.tran.input = "";
    }
    // this.tran.input = this.global.web3.utils.hexToUtf8(this.tran.input)
    console.log(this.tran);
  },
  computed: {
    ...mapGetters([
      "currentAccount",
      "wallet",
      "accountIndex",
      "web3",
      "ethBaseNet",
    ]),
  },
  methods: {
    ...mapActions(["setWallet", "setAccountIndex"]),
    convertBigNumber: (param) => {
      let strParam = String(param);
      let flag = /e/.test(strParam);
      if (!flag) return param;

      // 指数符号 true: 正，false: 负
      let sysbol = true;
      if (/e-/.test(strParam)) {
        sysbol = false;
      }
      // 指数
      let index = Number(strParam.match(/\d+$/)[0]);
      // 基数
      let basis = strParam.match(/^[\d\.]+/)[0].replace(/\./, "");

      if (sysbol) {
        return basis.padEnd(index + 1, 0);
      } else {
        return basis.padStart(index + basis.length, 0).replace(/^0/, "0.");
      }
    },
    returnPage() {
      if (this.tran.name == "ETH" || this.tran.name == "ether") {
        this.$router.push({ name: "Transaction", params: { symbol: "ETH" } });
      } else {
        this.$router.push({
          name: "TransactionERC",
          params: {
            symbol: this.$route.params.tran.name,
            coin: this.currentAccount.currentCoin,
          },
        });
      }
    },
    copy() {
      new Clipboard("#getHash", {
        text: function (trigger) {
          Dialog.alert({
            title: "提示",
            message: "已成功复制到剪切板",
          }).then(() => {});
          return trigger.getAttribute("href"); // 返回需要复制的内容
        },
      });
    },
    copys() {
      new Clipboard("#getHashs", {
        text: function (trigger) {
          Dialog.alert({
            title: "提示",
            message: "已成功复制到剪切板",
          }).then(() => {});
          return trigger.getAttribute("href"); // 返回需要复制的内容
        },
      });
    },
  },
  async mounted() {
    console.log(this.ethBaseNet);
    accountUtils.generatePublicKeyQrCode(
      "QRCode",
      "https://cn.etherscan.com/tx/" + this.tran.txhash
    );
    this.$refs.QRCode.style.width = "8.125rem";
    this.$refs.QRCode.style.height = "8.125rem";
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/transactionInfo.less");
</style>

